<template>
	<div class="login">
		<h2>登陆</h2>
		<yd-cell-group>
	        <yd-cell-item>
	           <yd-input slot="right" v-model="phone" ref="phone" required regex="mobile" placeholder="请输入手机号码"  :show-success-icon="false" :show-error-icon="false" :show-clear-icon="false"></yd-input>

	        </yd-cell-item>
	        <yd-cell-item>
	            <yd-input type="number" slot="right" placeholder="请输入验证码" required ref="code" v-model="code" regex="^\d{6}$" :show-success-icon="false" :show-error-icon="false" :show-clear-icon="false" > </yd-input>
	            <!-- ↓↓关键代码是这里↓↓ -->
	            <yd-sendcode slot="right" 
	            			init-str="获取验证码"
	                         v-model="start1" 
	                         @click.native="sendCode1" 
	                         type="warning"
	            ></yd-sendcode>
	            <!-- ↑↑关键代码是这里↑↑ -->
	        </yd-cell-item>
	          <yd-cell-item>
	            <input type="text" slot="right" placeholder="首次登陆请输入邀请码">
	        </yd-cell-item>
	       
	       
	          <yd-button :disabled="isTrue" :class="[isTrue ? 'loginBtn1' : 'loginBtn2']" @click.native="logIn">登陆</yd-button>
	          
	          <div class="footMes">
	          	登陆即表明您已经同意聊儿的<yd-button @click.native="show2 = true">使用条款</yd-button>和<yd-button @click.native="show3 = true">隐私协议</yd-button>
	          </div>
	          
	          <div class="footer">
	          	 <router-link :to=" '/choose' " class="getMa">邀请码获取攻略</router-link>
	          </div>
	          
	          <!--验证码错误-->
	           <yd-popup v-model="show1" position="center" width="40%">
		            <p>验证码错误</p>
		        </yd-popup>
		        
		        <!--使用条款和隐私协议弹出-->
		        <div class="show2">
		        	<yd-popup v-model="show2" position="bottom" height="90%">
		        		<div class="show2Body">
		        			<yd-button class="closeBtn" @click.native="show2 = false"></yd-button>
		        			<div class="show2Head">
			        			<p class="show2Head-tit">使用条款</p>
			        		</div>
				            <Terms></Terms> 
				           
		        		</div>
			        </yd-popup>
			        
			        <yd-popup v-model="show3" position="bottom" height="90%">
		        		<div class="show2Body">
		        			<yd-button class="closeBtn" @click.native="show3 = false"></yd-button>
		        			<div class="show2Head">
			        			<p class="show2Head-tit">隐私协议</p>
			        		</div>
				            <Privacy></Privacy>
				            
		        		</div>
			        </yd-popup>
		        </div>

			        
	        
	    </yd-cell-group>	
	</div>
    
</template>

<script>
	import Terms from './shiyongtiaokuan.vue'
	import Privacy from './yinsixieyi.vue'
    export default {
    	components:{
    		Terms,
    		Privacy
    	},
        data() {
            return {
                start1: false,
                phone:"",
                code:"",
                isTrue:true,
                show1: false,
                show2: false,
                show3: false
            }
        },
        mounted(){
        	
        },
        methods: {
            sendCode1() {
            	let input = this.$refs.phone;
            	// console.log(input.valid);

            	//手机号验证通过才能发验证码
            	if (input.valid) {
	            	this.$dialog.loading.open('发送中...');
	                setTimeout(() => {

	                    this.start1 = true;
	                    this.$dialog.loading.close();

	                    this.$dialog.toast({
	                        mes: '已发送',
	                        icon: 'success',
	                        timeout: 1500
	                    });

	                }, 1000);
            	}else{
            		
		                this.$dialog.alert({mes: "手机号"+input.errorMsg});
		            
            	}
                
            },
            isTrue1(){
            	//失去焦点时检测是否通过验证确认登陆按钮是否可用
            	let phone = this.$refs.phone;
	        	let code = this.$refs.code;
	        	if (phone.valid&&code.valid) {
	        		this.isTrue = false;
	        	}else{
	        		this.isTrue = true;
	        	}
	        	// this.isTrue = false
            },
            logIn(){
            	console.log(111);
            	
//          	this.show1 = true; 
//            	 $http.post().then(res=>{
//            	 	console.log(res.data);
//            	 if (res.data.status == 1) {
//            	 	
//            	 }else{
//            	 	
//            	 }
//            	  
//            	 })
            	this.$router.push('/choose',)
            }
        },
        watch:{
        	code(){
        		let phone = this.$refs.phone;
	        	let code = this.$refs.code;
	        	if (phone.valid&&code.valid) {
	        		this.isTrue = false;
	        	}else{
	        		this.isTrue = true;
	        	}
        	},
        	deep:true

        }
    }
</script>

<style >
	.login{
		width: 100%;
		height: 100%;
		background-image: url('../../../assets/bg.jpg');
		background-size: 100% 100%;
		padding: 1.06rem 0.3rem 0;
	}
	.login h2{
		color: #fff;
		font-size: 0.36rem;
		font-weight: normal;
		margin-bottom: 0.35rem;
	}
	.login .yd-cell{
		background-color: transparent;
	}
	.yd-cell:after{
		border: none;
	}
	.login .yd-cell input{
		font-size: 0.18rem !important;
		padding-right: 0;
		height: 100%;
		color: #FFFFFF;
		letter-spacing: 0;
	}
	.login .yd-cell input::-webkit-input-placeholder{
            color:#fff;
            opacity: 0.4;
        }
    .login .yd-cell input::-moz-placeholder{   /* Mozilla Firefox 19+ */
            color:#fff;
            opacity: 0.4;
        }
    .login .yd-cell input:-moz-placeholder{    /* Mozilla Firefox 4 to 18 */
            color:#fff;
            opacity: 0.4;
        }
    .login .yd-cell input:-ms-input-placeholder{  /* Internet Explorer 10-11 */ 
            color:#fff;
            opacity: 0.4;
        }
	.login .yd-cell-right button{
		font-size: 0.12rem;
		height: 0.3rem;
		border-radius: 0.15rem;
		padding: 0 0.1rem;
		background-color: transparent;
		border: 1px solid rgba(255,255,255,1);
	}
	.login .yd-cell-right{
		padding-right: 0;
		height: 0.55rem;
		min-height: 0.55rem; 
		padding-left: 0;
		border-bottom: 1px solid rgba(255,255,255,0.5);
	}
	.login .yd-confirm,.yd-alert{
		width: auto;
	}
	.login .yd-cell-item{
		padding-left: 0;
		margin-bottom: 0.2rem;
	}
	.loginBtn1{
		width: 1.5rem;
		height: 0.5rem;
		font-size: 0.2rem;
		background-color: #9b9b9b;
		opacity: 0.47;
		border-radius: 100px;
		font-family: PingFangSC-Regular;
		color: #FFFFFF;
		letter-spacing: 0;
		margin-top: 0.25rem;
	}
	.loginBtn2{
		width: 1.5rem;
		height: 0.5rem;
		font-size: 0.2rem;
		background-color: #FF5959 !important;
		opacity: 1;
		border-radius: 100px;
		/*font-family: PingFangSC-Regular;*/
		color: #FFFFFF;
		letter-spacing: 0;
		margin-top: 0.25rem;
	}
	.login .yd-cell:after{
		height: 0;
	}
	/*2018-08-17*/
	.login .yd-cell-item:not(:last-child):after{height: 0;}
	.login .yd-popup-center .yd-popup-content{height: 0.6rem !important;background-color: #fff;text-align: center;font-size: 0.18rem;color: #4C4C4C;line-height: 0.6rem;border-radius: 8px;}
	.login .footMes{text-align: center;font-size: 14px;color: #6D6D6D;margin-top: 0.23rem;}
	.login .footMes button{font-size: 0.14rem;color: #fff;}
	.login .footer{text-align: center;margin-top: 0.5rem;}
	.login .getMa{font-size: 0.14rem;color: rgba(255,255,255,0.57);}
	.login .yd-cell-right button{white-space: nowrap;}
	.login .show2 .yd-popup{border-top-left-radius: 16px;border-top-right-radius: 16px;}
	.login .show2 .yd-popup-content .show2Body{position: relative;box-sizing: border-box;}
	.login .show2 .yd-popup-content div:first-child{height: 100%;}
	.login .show2Head{height: 0.7rem !important;text-align: center;}
	.login .show2Head-tit{font-size: 0.18rem;color: #4c4c4c;line-height: 0.7rem;}
	.login .show2Con{height: calc(100% - 0.7rem) !important;overflow: auto;padding-bottom: 0.2rem;line-height: 0.25rem;font-size: 0.14rem;padding: 0px 5%;}
	.login .closeBtn{width: 0.2rem;height: 0.2rem;position: absolute;top: 0.2rem;right: 0.2rem;background-image: url(../../../assets/icon/closeBtn1.png);background-size: cover;}
</style>